import React, { FC, useState } from 'react';
import { BgImgProps } from './interface';

const defaultImg = 'https://s1.ax1x.com/2020/06/15/N9E2b8.png';

const BgImg: FC<BgImgProps> = ({
  src,
  width = 100,
  height,
  shape = 'square',
  sizeType = 'contain',
}) => {
  const [bgImg, changeBgImg] = useState(defaultImg);
  const onLoad = () => changeBgImg(src);

  const imgSty = {
    width,
    height: height || width,
    backgroundImage: `url(${bgImg})`,
    borderRadius: shape === 'circle' ? '50%' : 6,
    backgroundSize: sizeType,
  };
  return (
    <div className="rui-bg-img" style={imgSty}>
      <img src={src} onLoad={onLoad} style={{ display: 'none' }} alt="图片" />
      <p className="rui-bg-img-txt">红色的字</p>
    </div>
  );
};

export default BgImg;
